<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: item.path }" v-for="item in breadcrumbs" :key="item.name">{{item.meta.title}}</el-breadcrumb-item>
    <el-breadcrumb-item>{{$route.meta.title}}</el-breadcrumb-item>
  </el-breadcrumb>
  <el-button type="primary" @click="add">主1要22g按钮</el-button><br />
  <span>{{ count }}</span
  ><br />
  <el-button type="primary" @click="countAdd">store</el-button><br />
  <span>{{ storeCount }}</span
  ><br />
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-cartfill"></use>
  </svg>
  <div style="height: 900px"></div>
</template>

<script lang="ts">
import { ref, defineComponent, computed } from "vue";
import { useRouter, useRoute } from 'vue-router'
import { useStore } from "vuex";
export default defineComponent({
  name: "Test",
  setup: () => {
    const count = ref(0);
    const store = useStore();
    const storeCount = computed(() => store.state.count);
    const add = () => {
      count.value++;
    };
    const router = useRouter()
    const route = useRoute()
    console.log(router,route.matched)
    return {
      count,
      add,
      storeCount,
      countAdd: () => store.commit("increment"),
      breadcrumbs:route.matched.slice(0,-1)
    };
  },
});
</script>

<style lang="scss"></style>
